<template>
  <div style="background-color: rgb(242, 242, 242)">
    <homeHead :showLeft="true" :showPerson="true" name="个人信息"></homeHead>
    <div class="last">
      <mt-field
        label="姓名"
        placeholder="请输入姓名"
        v-model="RealName"
      ></mt-field>
      <mt-field
        label="手机号"
        :state="phoneNumState"
        placeholder="请输入手机号"
        type="tel"
        v-model="mobile"
      ></mt-field>
      <mt-field
        label="原密码"
        :state="lastPasswordState"
        placeholder="请输入原密码"
        type="password"
        v-model="lastPass"
      />
      <mt-field
        label="密码"
        :state="passwordState"
        placeholder="请输入密码"
        type="password"
        v-model="pass"
      >
      </mt-field>
      <mt-field
        label="邮箱"
        :state="emailState"
        placeholder="请输入邮箱"
        type="email"
        v-model="email"
      ></mt-field>
      <mt-field
        label="单位部门"
        v-model="addr"
        @click.native="popupVisible4 = true"
      >
      </mt-field>
      <div class="btn" @click="SaveUser()">提交</div>
    </div>
    <mt-popup v-model="popupVisible4" position="bottom" class="mint-popup-4">
      <mt-picker
        :slots="addressSlots"
        @change="onAddressChange"
        :visible-item-count="5"
        :show-toolbar="true"
        value-key="name"
      >
      </mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import homeHead from "./head.vue";
import { GetMenudept, UpdateUser } from "../../api/personalcenter";
import { isPhone, isPassword, isEmail } from "../../utils/utils";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      RealName: JSON.parse(window.localStorage.userInfo).RealName,
      mobile: JSON.parse(window.localStorage.userInfo).mobile,
      email: JSON.parse(window.localStorage.userInfo).email,
      lastPass:"",
      currendept: JSON.parse(window.localStorage.userInfo).FullName,
      phoneNumState: "",
      passwordState: "", 
      lastPasswordState:"",
      emailState: "",
      addressProvince: "",
      addressCity: "",
      addressProvinceid: "",
      addressCityid: " ",
      acb: [],
      popupVisible4: false,
      popupVisible: true,
      addressCity: "",
      addressSlots: [
        {
          flex: 1,
          values: [
            {
              value: "",
              name: "",
              disabled: "",
            },
          ],
          className: "slot1",
          textAlign: "center",
          defaultIndex: 0,
        },
        {
          divider: true,
          content: "-",
          className: "slot2",
        },
        {
          flex: 1,
          values: [
            {
              value: "",
              name: "",
              disabled: "",
            },
          ],
          className: "slot3",
          textAlign: "center",
          defaultIndex: 0,
        },
      ],
      userInfo: {},
    };
  },
  computed: {
    addr: {
      get: function () {
        return this.addressProvince + "-" + this.addressCity;
      },
      set: function () {},
    },
  },
  beforeCreate() {
    // 获取用户信息
    this.userInfo = JSON.parse(window.localStorage.userInfo);
  },
  mounted() {
    this.GetMenudeptp();
  },

  watch: {
    mobile: function (newVal, oldVal) {
      if (isPhone(newVal)) {
        this.phoneNumState = "success";
      } else {
        this.phoneNumState = "error";
      }
      if (newVal == "") {
        // 如果输入为空，取消状态显示
        this.phoneNumState = "";
      }
    },
    email: function (newVal, oldVal) {
      if (isEmail(newVal)) {
        this.emailState = "success";
      } else {
        this.emailState = "error";
      }
      if (newVal == "") {
        // 如果输入为空，取消状态显示
        this.emailState = "";
      }
    },
    pass: function (newVal, oldVal) {
      if (isPassword(newVal)) {
        this.passwordState = "success";
      } else {
        this.passwordState = "error";
        Toast({
          message:
            "密码为数字，小写字母，大写字母，特殊符号 至少包含三种,且数字和字母不能连续，长度为 8-20位",
          position: "center",
          duration: 2000,
        });
      }
      if (newVal == "") {
        // 如果输入为空，取消状态显示
        this.passwordState = "";
      }
    },
    lastPass: function (newVal, oldVal) {
      // if (isPassword(newVal)) {
      //   this.lastPasswordState = "success";
      // } else {
      //   this.lastPasswordState = "error";
      //   Toast({
      //     message:
      //       "原密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为 8 - 30位",
      //     position: "center",
      //     duration: 1000,
      //   });
      // }
      if (newVal == "") {
        // 如果输入为空，取消状态显示
        this.lastPasswordState = "";
      }
    },
  },

  methods: {
    onAddressChange(picker, values) { 
      picker.setSlotValues(1, values[0].children);
      if (values[0] && values[1]) {
        this.addressProvince = values[0].name;
        this.addressProvinceid = values[0].value;
        this.addressCityid = values[1].value;
        this.addressCity = values[1].name;
      }
    },
    GetMenudeptp() {
      GetMenudept().then((res) => {
        this.addressSlots[0].values = JSON.parse(res.data.data);
        var tes = JSON.parse(res.data.data);
        for (var i = 0; i < tes.length; i++) {
          for (var j = 0; j < tes[i].children.length; j++) {
            if (tes[i].children[j].name == this.currendept) {
              this.addressSlots[0].defaultIndex = i;
              this.addressSlots[2].defaultIndex = j;
            }
          }
        }
      });
    },
    SaveUser() { 
      
      if(this.mobile.length<=0){
          Toast("手机号不能为空");
           return;  
      }
         if(this.email.length<=0){
          Toast("邮箱不能为空");
           return;  
      }
      if (this.phoneNumState == "error") {
        Toast("手机号格式不正确");
        return;
      }
      if (this.passwordState == "error") {
        Toast("密码格式不正确");
        return;
      }
      if (this.passwordState == "error") {
        Toast("请确保密码是有效的");
        return;
      }
      const params = {
        User: {
          UserId: JSON.parse(window.localStorage.userInfo).UserId,
          RealName: this.RealName,
          Password:this.$getRsaCode(this.pass.trim()),
          Mobile: this.mobile=="undefined"?"":this.mobile,
          Email:this.email=="undefined"?"":this.email,
        },
        deptName: this.addressCity,
        deptId: this.addressCityid,
        oldpassword:this.$getRsaCode(this.lastPass.trim()),
      }; 
    
      UpdateUser(params).then((res) => { 
        if (res.data.status == 0) {  
          localStorage.setItem("userInfo",JSON.stringify(  
          $.extend(
           JSON.parse(window.localStorage.userInfo), 
           {
              RealName:this.RealName,
              mobile:this.mobile,
              email:this.email,
              FullName:this.addressCity, 
              Password:this.pass,
            }
          )
        ))
        Toast("修改成功");  
       this.$router.go(-1);
        } else {
          Toast(res.data.message);
        }
      });
    },
  },
  components: {
    homeHead: homeHead,
  },
};
</script>

<style lang="scss" scoped>
.middle {
  padding: 10px 20px;
  color: #c6c6c8;
}
.last {
  padding-top: 60px;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  background: #fff;
  // padding-top:40px;
  box-sizing: border-box;
  .form {
    list-style: none;
    padding: 0;
    width: 310px;
    margin: 0 auto;
    li {
      height: 60px;
      line-height: 60px;
    }
    .label {
      display: inline-block;
      width: 60px;
      vertical-align: top;
    }
    input {
      display: inline-block;
      width: 240px;
      border: 0 none;
      border-bottom: 1px solid #ddd;
      outline-style: none;
      list-style: none;
      padding-bottom: 5px;
      vertical-align: middle;
    }
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
      color: #e0dede;
    }

    /* Mozilla Firefox 4 to 18 */

    input:-moz-placeholder,
    textarea:-moz-placeholder {
      color: #e0dede;
    }

    /* Mozilla Firefox 19+ */

    input::-moz-placeholder,
    textarea::-moz-placeholder {
      color: #e0dede;
    }

    /* Internet Explorer 10+ */

    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
      color: #e0dede;
    }
  }
  .btn {
    width: 80%;
    margin: 0 auto;
    margin-top: 50px;
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #367bf0;
    color: #fff;
    cursor: pointer;
  }

  .mint-field .mint-cell-title {
    width: 72px;
  }
}
/deep/.mint-cell-text {
  vertical-align: top;
}
</style>
